//停车费部分

@import '//at.alicdn.com/t/font_yvv5wcjamvd9529.css';

$blue: #75cbeb;
$green: #40cccd;

.parking{
    position: relative;
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction:column;
    justify-content:space-between;
    box-sizing: border-box;

    .info{
        padding-top: .4rem;
        text-align: center; 
        box-sizing: box-sizing;

        .name{
            font-size: .18rem;

            span{
                margin-left: .2rem;
            }
        }

        .time{
            margin-top: .2rem;
            color: #aaa;
        }
    }

    .price{
        text-align: center;
        >p{
            margin-bottom: .25rem;
            font-size: .16rem;
        }
        .num{
            font-size: 1rem;
            font-weight: 300;
            color: #ff0000;
        }
    }

    .tips{
        margin-bottom: .8rem;
        font-size: .14rem;
        text-align: center;
        line-height: 1.2em;
        color: #888;
    }

    .bottom{
        display: flex;
        position: absolute;
        padding: .2rem .15rem;
        bottom: 0;
        width: 100%;
        height: .8rem;
        justify-content:space-between;
        box-sizing: border-box;

        >a{
            display: flex;
            justify-content:center;
            align-items: center;
            width: 48%;
            color: #fff;
        }
        
        .history-price{
            background: $green;
        }

        .pay{
            background: $blue;
        }

    }
}

.parking-pay{
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    .pay-bg{
        display: flex;
        margin-top: -1.8rem;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 5rem;
    }

    .cost{
        height: 3rem;
        line-height: 3rem;
        font-weight: 400;
        font-size: .25rem;

        >.price{
            color: #ff0000;
        }
    }

    .way{
        p{
            font-size: .16rem;
            color: #aaa;
        }
        >a{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: .1rem auto;
            width: 75%;
            height: .4rem;
            color: #fff;
        }
        .call-icon{
            margin-right: .1rem;
            font-size: .3rem;
        }
        .zfb{
            background: $blue;
        }
        .wx{
            background: $green;
        }
    }
}

.parking-history{
    width: 100vw;
    min-height: 100vh;
    padding: .1rem 0;
    box-sizing: border-box;
    background: #ededed;


    .list{
        position: relative;
        display: flex;
        padding: .15rem .2rem;
        justify-content: space-between;
        background: #fff;
        color: #333;
        border-bottom: 1px solid #ddd;

        &:first-child{
            border-top: 1px solid #ddd;
        }
    }

    .price{
        font-size: .16rem;
        color: #ff0000;
        text-align: right;
    }

    .time{
        margin-bottom: 0;
        font-size: .14rem;
        color: #aaa;

    }
}

.parking-history-detail{
    width: 100vw;
    min-height: 100vh;
    box-sizing: border-box;
    color: #333;
    padding: .2rem;

    .card{
        font-weight: 400;
        margin: .3rem auto .5rem auto;
    }

    .car-card{
        margin-left: .2rem;
    }

    .list{
        margin-bottom: .15rem;
    }

    .title{
        font-size: .14rem;
        color: #aaa;
    }

    .price{
        color: #ff0000;
    }
}
